<template>
	<view class="container">
		<view class="user-top" v-if="userInfo && userInfo.id">
			<view class="" @click="setInfo">
				<view class="img">
					<image :src="userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
					<image src="/static/image@2x.png" mode="aspectFill" v-else></image>
				</view>
				<view class="name" v-if="userInfo.nickname">
					{{userInfo.nickname}}
				</view>
				<button class="name" open-type="getUserInfo" @getuserinfo="login" v-else>授权登录</button>
			</view>
			<view class="tel" v-if="userInfo.phone">
				{{userInfo.phone}}
			</view>
			<!-- 	<button open-type="getPhoneNumber" class="tel" @bindgetphonenumber="getPhoneNumberHandler"
				v-else>绑定手机号</button> -->
		</view>
		<view class="user-middle">
			<image src="/static/ubcg.png" mode=""></image>
			<view class="i" @click="$pageTo(`/pages/user/money`)">
				<view class="btn">充值</view>
				<view class="m">
					<text style="font-family: 'DINB';">{{userInfo.coin||0}}</text>
					<text class="t1">商人币</text>
				</view>
				<view class="texst">
					可用于解锁信息
				</view>
			</view>
		</view>
		<view class="user-list">
			<view v-if="verifyUpWx == 0" class="item u-flex u-col-center u-row-between"
				@click="$pageTo(`/pages/user/order/orderList`)">
				<view class="l u-flex u-col-center ">
					<image src="/static/u2.png" mode="aspectFill"></image>
					<text>报价管理</text>
				</view>
				<view class="r flex">
					<view class="r_num" v-if="singdata.quotationCount !='0'">
						{{singdata.quotationCount}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view v-if="verifyUpWx == 0" class="item u-flex u-col-center u-row-between"
				@click="$pageTo(`/pages/user/myorder`)">
				<view class="l u-flex u-col-center ">
					<image src="/static/u1.png" mode="aspectFill"></image>
					<text>我的出价</text>
				</view>
				<view class="r flex">
					<view class="r_num" v-if="singdata.buyerCount !='0'">
						{{singdata.buyerCount}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view v-if="verifyUpWx == 0" class="item u-flex u-col-center u-row-between"
				@click="$pageTo(`/pages/user/addressList?types=user`)">
				<view class="l u-flex u-col-center ">
					<image src="/static/u3.png" mode="aspectFill"></image>
					<text>我的联系信息</text>
				</view>
				<view class="r">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view v-if="verifyUpWx == 0" class="item u-flex u-col-center u-row-between"
				@click="$pageTo(`/pages/user/tradList`)">
				<view class="l u-flex u-col-center ">
					<image src="/static/u4.png" mode="aspectFill"></image>
					<text>担保交易订单</text>
				</view>
				<view class="r flex">
					<view class="r_num" v-if="singdata.orderCount !='0'">
						进行中
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l u-flex u-col-center ">
					<image src="/static/u5.png" mode="aspectFill"></image>
					<text>联系客服</text>
				</view>
				<button class='btns' open-type="contact"></button>
			</view>
		</view>
		<view class="f-btn" @click="release" v-if="verifyUpWx == 0">
			发布报价
		</view>
		<uni-popup ref="popupshow2" type="center">
			<view class="m-pop2">
				<view class="t">
					商人币不足，请充值（发布报价需消耗{{coin}}个商人币/天）
				</view>
				<view class="btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="close2">
						暂不
					</view>
					<view class="btn btn2" @click="$pageTo(`/pages/user/money`)">
						去充值
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupUser" type="bottom" @change="ischage" :safe-area="false">
			<view class="m-pop3">
				<view class="u-title">
					修改用户信息
				</view>
				<view class="u-list">
					<view class="avatar" @click="upload">
						<image :src="avatarL" mode="aspectFill" class="img" v-if="avatarL">
						</image>
						<image src="@/static/image@2x.png" mode="aspectFill" class="img" v-else></image>
						<image src="@/static/up1.png" mode="aspectFill" class="up"></image>
					</view>
					<view class="item u-flex u-col-center u-row-between">
						<view class="l">
							昵称
						</view>
						<view class="r">
							<input type="text" v-model="nickname" placeholder="请输入昵称" placeholder-class="pclass" />
						</view>
					</view>
					<!-- 	<view class="item u-flex u-col-center u-row-between">
						<view class="l">
							手机号
						</view>
						<view class="r">
							<input type="number" v-model="userInfo.phone" placeholder="请输入手机号"
								placeholder-class="pclass" />
						</view>
					</view> -->
				</view>
				<view class="u-btn" @click="userSubmit">
					确认
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUserinfo,
		webconfig,
		messageSeecount,
		login,
		bondRecharge,
		editUserinfo,
		usersTips
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				// 个人信息
				userInfo: {
					id: "",
					avatar: "",
					bond: 0,
					coin: 0,
					datafrom: 1,
					dyopenid: "",
					nickname: "",
					phone: "",
					type: 2,
					wxopenid: "",
				},
				nickname: '',
				avatarL: '',
				verifyUpWx: 0,
				coin: 0,
				singdata:{}
			}
		},
		onShow() {
			if (uni.getStorageSync('userToken')) {
				this.getwebconfig()
				this.getSeeCount()
				this.getUser()
				this.gettip()
			} else {
				this.login()
			}
		},
		computed: {
			getBond() {
				return (a, b) => {
					return a - b
				}
			},
		},
		methods: {
			gettip(){
				usersTips().then(res=>{
					if(res.code == 200){
						this.singdata = res.data
					}
				})
			},
			ischage(e) {
				if (e.show) {
					uni.hideTabBar()
				} else {
					setTimeout(() => {
						uni.showTabBar()
					}, 500)
				}
			},
			setInfo() {
				this.$refs.popupUser.open()
			},
			release() {
				if (this.userInfo.coin < this.coin) {
					this.$refs.popupshow2.open()
				} else {
					uni.navigateTo({
						url: '/pages/user/release'
					})
				}
			},
			close2() {
				this.$refs.popupshow2.close()
			},
			getUser() {
				getUserinfo({}).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('userInfo', res.data)
						this.userInfo = res.data
						this.avatarL = res.data.avatar
						this.nickname = res.data.nickname
					}
				})
			},
			getwebconfig() {
				webconfig({}).then(res => {
					if (res.code == 200) {
						this.coin = res.data.coin
						this.verifyUpWx = res.data.verifyUpWx
					}
				})
			},
			getSeeCount() {
				messageSeecount({}).then(res => {
					if (res.code == 200) {
						let num = res.data
						if (num > 0) {
							uni.setTabBarBadge({
								index: 1,
								text: '新'
							})
						} else {
							uni.removeTabBarBadge({
								index: 1
							})
						}
					}
				})
			},
			login() {
				uni.login({
					force: true,
					success: (r) => {
						login({
							code: r.code
						}).then(res => {
							if (res.code == 200) {
								uni.setStorageSync('openId', res.data.openId)
								uni.setStorageSync('userToken', res.data.token)
								uni.setStorageSync('userInfo', res.data)
								uni.setStorageSync('loginTime', new Date().getTime())
								this.getUser()
							}
						})
					},
					fail(res) {
						console.log(`login 调用失败`);
					},
				});
			},
			upload() {
				this.$uploadone().then(res => {
					this.avatarL = res
				})
			},
			userSubmit() {
				editUserinfo({
					avatar: this.avatarL,
					nickname: this.nickname
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '更新成功',
							icon: "none"
						});
						this.$refs.popupUser.close()
						this.getUser()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 60rpx 30rpx 0rpx 30rpx;

		.m-pop3 {
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 30rpx;
			background: #fff;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			height: 700rpx;

			.u-title {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				color: #333;
				font-weight: 600;
			}

			.u-btn {
				height: 80rpx;
				line-height: 80rpx;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
				border-radius: 10rpx;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
			}

			.u-list {
				.avatar {
					width: 200rpx;
					height: 200rpx;
					margin: 30rpx auto;
					position: relative;

					.img {
						width: 200rpx;
						height: 200rpx;
						border-radius: 50%;
						overflow: hidden;
						border: 2rpx solid #FF6F07;
						box-sizing: border-box;

					}

					.up {
						position: absolute;
						bottom: 0;
						right: 20rpx;
						width: 50rpx;
						height: 50rpx;
						background-color: #fff;
						border-radius: 50%;
						z-index: 999;
					}
				}

				.item {
					padding: 30rpx 0;
					border-bottom: 2rpx solid #eee;

					&:last-child {
						border-bottom: none;
					}

					.l {
						font-size: 26rpx;
						color: #666;
						width: 200rpx;
					}

					.r {
						flex: 1;
						width: 1rpx;
						text-align: right;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						input {
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
		}

		.m-pop2 {
			width: 620rpx;
			box-sizing: border-box;
			padding: 60rpx 40rpx 20rpx;
			background: #fff;
			border-radius: 20rpx;

			.t {
				font-size: 32rpx;
				color: #000000;
				text-align: center;
			}

			.btns {
				width: 100%;
				margin-top: 50rpx;

				.btn {
					text-align: center;
					font-size: 32rpx;
					width: calc(50% - 10rpx);
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 20rpx;
				}

				.btn1 {

					background: #F9F9F9;
					color: #D1CDCD;
				}

				.btn2 {
					color: #fff;
					background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

				}
			}
		}


		.f-btn {
			position: fixed;
			left: 30rpx;
			right: 30rpx;
			bottom: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			color: #fff;
			font-weight: 600;
			background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
			border-radius: 20rpx;
			text-align: center;
		}

		.user-list {
			margin-top: 20rpx;

			.item {
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 30rpx 15rpx;
				position: relative;
				.btns {
					top: 0%;
					left: 0%;
					position: absolute;
					width: 100%;
					height: 90rpx;
					opacity: 0.1;
				}

				.l {
					height: 40rpx;
					line-height: 40rpx;
					flex: 1;
					width: 1rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						margin-left: 20rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #11192D;
						text-align: left;
					}
				}
				.r {
					.r_num{
						height: 32rpx;
						background: #FE1515;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						padding: 0rpx 16rpx;
						font-family: Inter, Inter;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 32rpx;
						margin-right: 15rpx;
					}
				}

			}
		}

		.user-middle {
			margin-top: 30rpx;
			width: 690rpx;
			height: 160rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			background: #fff;
			position: relative;

			image {
				width: 690rpx;
				height: 160rpx;
				position: absolute;
				top: 0%;
			}

			.i {
				width: 690rpx;
				height: 160rpx;
				position: absolute;
				top: 0%;
				padding: 22rpx 28rpx;
				box-sizing: border-box;

				.btn {
					position: absolute;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #3191FF;
					right: 38rpx;
				}

				.m {
					font-size: 68rpx;

					.t1 {
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}

				.texst {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #D1D1D6;
				}
			}
		}

		.user-top {
			display: flex;
			text-align: center;
			justify-content: center;

			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {

				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				text-align: center;
				margin-top: 20rpx;
				border: none;
				background-color: transparent;
				padding: 0;

				&::after {
					display: none;
				}


			}

			.tel {
				margin-top: 10rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #333;
				text-align: center;
				border: none;
				background-color: transparent;
				padding: 0;

				&::after {
					display: none;
				}
			}

			.tel2 {
				margin-top: 10rpx;
				width: 200rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				border-radius: 26rpx;
				color: #fff;
				font-size: 28rpx;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
			}
		}
	}
</style>